<template>
  <div class="home-box">
    <el-row class="shop-box" :gutter="20">
      <el-col :span="6">
        <div class="item-today">
          <div class="today-icon">
            <el-icon>
              <Coin />
            </el-icon>
          </div>
          <div class="today-text">
            <P class="text-title">今日收入</P>
            <P>503,225.00</P>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="chart-box">
      <el-col :span="12">
        <common-chart chart-type="bar" :options="barOptions"></common-chart>
      </el-col>
      <el-col :span="12">
        <common-chart chart-type="line" :options="lineOptions"></common-chart>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-row class="table-box">
      <el-col>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column v-for="(val,key) in tableLabel" :key="key" :prop="key" :label="val"/>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import CommonChart from '../../components/CommonChart.vue';
import { onMounted, ref,getCurrentInstance } from 'vue';
// import axios from 'axios'
// import request from '../../api/request.js'

const {proxy} =getCurrentInstance()

// 条形图
const barOptions = {
  title: {
    text: '每周用户',
    textStyle: {
      fontWeight: 400,
      fontSize: 12
    }
  },
  color: ['rgb(51, 202, 187)'],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(20,20,20,.7)',
    textStyle: {
      color: '#fff',
    }
  },
  axisPointer: {
    type: 'shadow',
    label: {
      color: '#fff',
      backgroundColor: '#000'
    }
  },
  xAxis: {
    type: 'category',
    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [180, 352, 155, 841, 435, 606, 321],
      type: 'bar'
    }
  ]
}
// 折线图
const lineOptions = {
  color: ['rgb(51, 202, 187)'],
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(20,20,20,.7)',
    textStyle: {
      color: '#fff',
    }
  },
  xAxis: {
    type: 'category',
    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [10, 22, 58, 46, 75, 50, 86],
      type: 'line',
      smooth: true
    }
  ]
};

// 表格数据
let tableData = ref([])
// 获取表格数据
const getTableList = async ()=>{
  let res = await proxy.$api.getTableData()
  tableData.value=res.tableData
  console.log(res);
}


// 表格标头数据
const tableLabel={
  name:'商品',
  todayBuy:'今日购买',
  monthBuy:'本月购买',
  totalBuy:'总购买'
}


onMounted(() => {
  getTableList()
})
</script>


<style lang="less">
.shop-box {
  background-color: #fff;
  height: 80px;
  border-radius: 5px;

  .item-today {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    margin: 10px 0;
    background-color: rgb(51, 202, 187);
    border-radius: 5px;
    padding: 0 10px;
    color: #fff;
    font-size: 24px;

    .today-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      width: 40px;
      border-radius: 50%;
      background-color: rgba(160, 160, 160, .3);
    }

    .text-title {
      font-size: 12px;
      font-weight: 400;
      margin-bottom: 7px;
    }
  }
}

.chart-box {
  background-color: #fff;
  border-radius: 5px;
  margin-top: 10px;
}
.table-box{
  margin-top: 20px;
}
</style>